<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="../js/lib-master/index.js"></script>
  
    <link rel="stylesheet" href="../js/lib-master/theme-chalk/index.css">
    <link rel="stylesheet" href="/css/Backstage.css">
    <link rel="stylesheet" href="/css/colorSelect.css">
    <script src="/js/jquery.js"></script>

    <style>
        #app{
            font-size: 16px;
            margin-left: 2%;
            margin-right: 2%;
        }
        .el-input {
            width: 300px;
        }
        .el-table .el-input {
            width: 100%;
            height: 100%;
        }

    </style>
</head>
<body>
    <div id="app">
        颜色分类
        <el-form  label-width="100px" class="demo-dynamic">
            
            <el-form-item
              v-for="(domain, index) in domains"
              :label="'颜色' + (index+1)"
              :key="index"
              :prop="'domains.' + index + '.value'"
             
            >
              <el-input v-model="domain.value" 
               @focus="showColor()"
               @blur="addDomain($event)" 
               
               clearable></el-input>
               <input type="file" />
              <el-button @click.prevent="removeDomain(domain)">删除</el-button>
            </el-form-item>
            <el-form-item v-if="disabled">
                <div id="colorInput" style="width: 100%;">
                    <!-- 系列选择 -->
                <div class="navbar">
                    <ul>
                        <li onmouseover="showData('white')">
                        <span class="square" style="background-color: white;"></span>白色系
                        </li>
                        <li onmouseover="showData('gray')">
                            <span class="square" style="background-color: gray;"></span>灰色系
                        </li>
                        
                        
                        <li onmouseover="showData('purple')">
                            <span class="square" style="background-color: purple;"></span>紫色系
                        </li>
                            
                        
                        <li onmouseover="showData('blue')">
                        <span class="square" style="background-color: blue;"></span>蓝色系
                        </li>
            
                        <li onmouseover="showData('red')">
                        <span class="square" style="background-color: red;"></span>红色系
                        </li>
                    </ul>
                </div>
                  
                  
            
                <!-- 颜色系列 -->
                <div id="white" class="colorBox">
                    <div class="color_list">
                    <ul>
                        <li><span class="square" style="background-color:  #FFFFFF;"></span>白色</li>
                        <li><span class="square" style="background-color:  #F5F5DC;"></span>米白色</li>
                        <li><span class="square" style="background-color:  #fffff0;"></span>象牙白</li>
                    </ul>
                    </div>
                </div>
            
                <div id="gray"  class="colorBox">
                <div class="color_list">
                    <ul>
                        <li><span class="square" style="background-color:  #696969;"></span>灰色</li>
                        <li><span class="square" style="background-color:  #D3D3D3;"></span>浅灰色</li>
                        <li><span class="square" style="background-color:  #A9A9A9;"></span>深灰色</li>
                        <li><span class="square" style="background-color:  #C0C0C0;"></span>银灰色</li>
                    </ul>
                    </div>
                </div>
                
                <div id="purple"  class="colorBox">
                <div class="color_list">
                    <ul>
                        <li><span class="square" style="background-color:  #EE82EE;"></span>紫色</li>
                        <li><span class="square" style="background-color:  #8A2BE2;"></span>紫罗兰</li>
                        <li><span class="square" style="background-color:  #DDA0DD;"></span>李子色</li>
                    </ul>
                    </div>
                </div>
            
                <div id="red"  class="colorBox">
                <div class="color_list">
                    <ul>
                        <li><span class="square" style="background-color:  #FF0000;"></span>红色</li>
                        <li><span class="square" style="background-color:  #DC143C   ;"></span>绯红</li>
                        <li><span class="square" style="background-color:  #FF4500;"></span>橙红色</li>
                        <li><span class="square" style="background-color:  #FFC0CB;"></span>粉桃红</li>
                        
                    </ul><ul>
                        <li><span class="square" style="background-color:  #B22222;"></span>胭脂红</li>
                        <li><span class="square" style="background-color:  #FF7F50;"></span>珊瑚红</li>
                        <li><span class="square" style="background-color:  #FF007F   ;"></span>玫瑰红</li>
                        <li><span class="square" style="background-color:  #FF6347;"></span>番茄红</li>
                    </ul>
                    </div>
                </div>
            
                <div id="blue"  class="colorBox">
                <div class="color_list">
                    <ul>
                        <li><span class="square" style="background-color:  #0000FF;"></span>蓝色</li>
                        <li><span class="square" style="background-color:  #87CEFF;"></span>天空蓝</li>
                        <li><span class="square" style="background-color:  #B0C4DE;"></span>雪青蓝</li>
                        <li><span class="square" style="background-color:  #00BFFF;"></span>湖水蓝</li>
                    </ul>
                    </div>
                </div>
                <!-- 展示框 -->
                <div id="dataContainer">
                常用标准颜色<br />
                </div>
                </div>
            </el-form-item>
        </el-form>


        <div>
            内存<br /><br />
            <el-checkbox-group v-model="memories">
              <el-checkbox label="16GB+1TB" name="type"></el-checkbox> 
              <el-checkbox label="12GB+512GB" name="type"></el-checkbox>
              <el-checkbox label="12GB+256GB" name="type"></el-checkbox>
              <el-checkbox label="8GB+256GB" name="type"></el-checkbox>
            </el-checkbox-group>
            <br />
            <el-checkbox-group v-model="memories">
                <el-checkbox label="8GB+128GB" name="type"></el-checkbox>
                <el-checkbox label="6GB+256GB" name="type"></el-checkbox>
                <el-checkbox label="6GB+128GB" name="type"></el-checkbox>
            </el-checkbox-group>
        </div>
        <P>产品销售规格&nbsp;
            <span style="color: #696969; margin-left: 10px; font-size: 13px;"
            >在标题栏中选择或输入可进行筛选和批量填充</span>
            <el-button type="primary" style="margin-left: 5%;" @click="batchFill()">批量填充</el-button>
        </P>        
        <el-table :data="tableList" style="width: 100%;"  >
            <el-table-column prop="color" >
                <template slot="header" slot-scope="scope">
                    <el-select v-model="unifyColor"  placeholder="颜色"  @change="getDetailByColor()">
                        <el-option v-for="domain in domains" :value="domain.value"
                         v-if="domain.value!=''">
                         {{domain.value}}
                        </el-option>
                    </el-select>
                </template>
                <template slot-scope="scope">
                    {{ scope.row.color }}
                </template>
            </el-table-column>

            <el-table-column prop="memory">
                <template slot="header" slot-scope="scope">
                    <el-select v-model="unifyMemory"  placeholder="内存"  @change="getDetailByMemory()">
                        <el-option v-for="m in memories"  :value="m">{{m}}</el-option>
                    </el-select>
                </template>
                <template slot-scope="scope">
                    {{scope.row.memory}}
                </template>
            </el-table-column>

            <el-table-column prop="price" >
                <template slot="header" slot-scope="scope">
                    <el-input
                      v-model="unifyPrice"
                      placeholder="价格（元）" />
                </template>
                <template slot-scope="scope">
                    <el-input v-model="scope.row.price" style="height: 100%; width: 100%;"></el-input>
                </template>
            </el-table-column>
            
            <el-table-column prop="amount" >
                <template slot="header" slot-scope="scope">
                    <el-input
                      v-model="unifyAmount"
                      placeholder="数量（件）"/>
                </template>

                <template slot-scope="scope">
                    <el-input v-model="scope.row.amount" style="height: 100%; width: 100%;"></el-input>
                </template>
            </el-table-column>
            
        </el-table >


        <br />
        <el-button style="float: right;" type="primary" @click="publish">发布</el-button>
       <input type="text" v-model="productID">
            

    </div>
    <br /><br /><br /><br />
    
    <script src="/js/backcommon.js"></script>
    <script>
        let vm=new Vue({
            el: "#app",
            data:{
                memories:[],
                domains: [{
                    value: ''

                }],
                detailList:[],
                tableList:[],
                
                unifyPrice:"",
                unifyAmount:"",
                unifyMemory:"",
                unifyColor:"",
                disabled:false,
                productID:'',
                files:[]
            },
            created:function(){
                var urlParams = new URLSearchParams(window.location.search);
                this.productID=urlParams.get('productID');
            },
            beforeUpdate:function () {
               
                let isAssign=false
                for (var i = 0; i < vm.detailList.length; i++) {
                    if(vm.detailList[i].price!='' || vm.detailList[i].amount!=''){
                        isAssign=true;
                        break;
                    }
                }
                //未赋值
                if(!isAssign){
                    vm.detailList=[] 
                    for (var i = 0; i < vm.domains.length; i++) {
                    if(vm.domains[i].value!='')
                    for (var j = 0; j < vm.memories.length; j++) {
                        var detail={
                            color:vm.domains[i].value,
                            memory:vm.memories[j],
                            price:'',
                            amount:''
                        }
                        vm.detailList.push(detail)
                    }
                    }
                }
                else{
                    for(var i in vm.tableList){
                        var model= vm.tableList[i]
                        for(var j in vm.detailList){
                        var detail = vm.detailList[j]
                        if(model.color== detail.color && model.memory == detail.memory){
                            detail.price=model.price
                            detail.amount=model.amount
                            break;
                        }
                        }
                    }
                }
                //未选择分类
                if(vm.unifyColor=='' && vm.unifyMemory==''){
                    vm.tableList=vm.detailList
                }
            },
            methods:{
                removeDomain(item) {
                    var index = this.domains.indexOf(item)
                    if (index !== -1) {
                    this.domains.splice(index, 1)
                    }
                },
                addDomain(event) {
                    var len=this.domains.length;
                    
                    var val=this.domains[len-1].value
                    if(val!=""){
                        this.domains.push({
                        value: '',
                        });
                        vm.disabled=false;
                    }
                },
                showColor(){
                    vm.disabled=true
                },
                getDetailByMemory(){
                    vm.tableList=[]
                    for (var i = 0; i < vm.detailList.length; i++) {
                        var detail = vm.detailList[i];
                        if (detail.memory==vm.unifyMemory){
                            vm.tableList.push(detail)
                        }
                    }
                    vm.unifyColor=''
                },
                getDetailByColor(){
                    vm.tableList=[]
                    for (var i = 0; i < vm.detailList.length; i++) {
                        var detail = vm.detailList[i];
                        if (detail.color==vm.unifyColor){
                            vm.tableList.push(detail)
                        }
                    }
                    vm.unifyMemory=''
                },
                batchFill(){
                    if(vm.unifyPrice!='' || vm.unifyAmount!=''){
                        for(var i in vm.tableList){
                            var model= vm.tableList[i]
                            if(vm.unifyPrice!=''){
                                model.price=vm.unifyPrice
                            }
                            if(vm.unifyAmount!=''){
                                model.amount=vm.unifyAmount
                            }
                            for(var j in vm.detailList){
                                var detail = vm.detailList[j]
                                if(model.color== detail.color && model.memory == detail.memory){
                                    detail.price=model.price
                                    detail.amount=model.amount
                                    break;
                                }
                            }
                        }
                    }
                   
                    vm.tableList=vm.detailList
               
                    vm.unifyPrice=''
                    vm.unifyAmount=''
                    vm.unifyMemory=""
                    vm.unifyColor=""
                    
                },
                publish(){
                    vm.getAllFile()
                    const form =new FormData();
                    if(vm.files.length!=0){
                        for(var index in vm.files)
                        form.append('files',vm.files[index])
                    }
                    
                    for(var index in vm.detailList){
                        form.append('detailList', JSON.stringify(vm.detailList[index]))
                    }
                    axios({
                        url:'/info/insert',
                        method:'POST',
                        params:{productID:vm.productID},
                        data:form,
                        config:{ Headers:{'Content-Type':'multipart/form-data'} }
                    }).then(function(resp){
                        
                        
                    })
                },
                getAllFile(){
                    var fileInputs = document.querySelectorAll('input[type="file"]');
                    // 遍历每个文件输入
                    fileInputs.forEach(function(fileInput) {
                        var files = fileInput.files;
                        if(files[0]!=null){
                            vm.files.push(files[0])
                        }
                    });
                }
            }
        })
    </script>
    <script src="/js/colorSelect.js"></script>
</body>
</html>